<template>
  <div class="dialog">
    <div id="container">
      <div id="output"></div>
    </div>
    <div class="header">
      <div class="header-left">
        <img src="../assets/navtop-w.png" alt="">
      </div>
      <!-- <div class="header-right">
        <p>
        <span>上海市医药供应链第三方药品追溯平台</span></br>
        <span>Shanghai Medical Supply ChainThird-party Drug Traceability Platform</span>
      </p>
      </div> -->
    </div>
    <div title="登陆" width="30%" class=login>
      <div class="login-label">
        <span>登录</span>
      </div>
      <el-form :model="adminForm" ref="adminForm" class="adminForm">
        <el-form-item prop="account">
          <span class="icon-label">
            <img src="../assets/icon-05.png" alt="">
          </span>
          <el-input type="text" v-model="adminForm.username" auto-complete="off" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="enterid">
          <span class="icon-label">
            <img src="../assets/icon-06.png" alt="">
          </span>
          <el-input type="text" v-model="adminForm.enterprise" auto-complete="off" placeholder="企业编号为八位数字">
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <span class="icon-label">
            <img src="../assets/icon-07.png" alt="">
          </span>
          <el-input type="password" v-model="adminForm.password" auto-complete="off" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item class="btn-group">
          <el-button type="primary" style="width:100%" @click="submitForm">登录</el-button>
        </el-form-item>
        <el-form-item class="text-right" style="margin-bottom:0px;">
          <router-link class="clickable" style="float:right" to="signup">企业入驻>></router-link>
          <span class="clickable pass-forgot">忘记密码</span>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Login',
    data() {
      return {
        msg: 'Vue-Login',
        dialogVisible: true,
        adminForm: {
          username: '',
          enterprise: '',
          password: ''
        }
      }
    },
    methods: {
      submitForm() {
        // this.$store.commit('super')
        this.$http({
          url: '/login/',
          method: 'post',
          data: this.adminForm
        }).then(response => {
          // success callback
          console.log(response.data)
          
          this.$store.commit('admin', {
            token: response.data.token,
            id: response.data.user.id,
            username: response.data.user.username,
            user_type: response.data.user.user_type,
            enterprise: this.adminForm.enterprise
          })
          this.$message({
            message: '登陆成功',
            showClose: true,
            type: 'success'
          });
          if (this.adminForm.enterprise == '00000000') {
            this.$router.push({
              path: 'home/Government_charts'
            })
          }else{
             this.$router.push({
              path: 'home/Company_charts'
            })
          }

        }).catch(error => {
          console.log(error)
          if (error.response) {
            // The request was made and the server responded with a status code
            // that falls out of the range of 2xx
            console.log(error.response.data);
            // console.log(error.response.status);
            // console.log(error.response.headers);
          } else if (error.request) {
            console.log(error.request);
          } else {
            console.log('Error', error.message);
          }
          // console.log(error.config);
          this.$message({
            message: '登陆失败',
            showClose: true,
            type: 'error'
          });
        });
      }
    },
    mounted: function () {
      // 初始化 传入dom id
      var victor = new Victor("container", "output");
      var theme = [
        ["#002c4a", "#005584"],
        ["#35ac03", "#3f4303"],
        ["#ac0908", "#cd5726"],
        ["#18bbff", "#00486b"]
      ]
      $(".color li").each(function (index, val) {
        var color = theme[index];
        $(this).mouseover(function () {
          victor(color).set();
        })

      });
    },
  }

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  html,
  body {
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    width: 100%;
  }

  .dialog {
    width: 100%;
    height: 100%;
    background: url('../assets/background.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  .login {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -160px;
    width: 320px;
    min-height: 300px;
    padding: 20px;
    border-radius: 5px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.1);
  }

  .login p {
    color: red;
    text-align: left;
  }
  /* .AdminForm{
    
  } */

  .text-right {
    text-align: right;
  }

  .clickable {
    color: white;
    cursor: pointer;
  }

  .login {
    margin-right: 20px
  }

  .header {
    position: fixed;
    height: 60px;
    text-align: left;
    padding: 30px;
  }

  .header-left {
    width: 440px;
    height: auto;
    border-radius: 50%;
    float: left;
    margin-right: 20px;
  }

  .header-left img {
    width: 100%;
  }

  .header-right {
    padding-top: 3px;
    float: left;
    height: 60px;
    width: auto;
    color: white;
    font-weight: bold;
  }

  .header-right>p>span:first-child {
    font-size: 23px;
  }

  .header-right>p>span:last-child {
    font-size: 10px;
  }

  .login-label {
    width: 300px;
    margin: 0 auto;
    border-left: 3px solid #409EFF;
    text-align: left;
    font-size: 20px;
    color: white;
    padding-left: 10px;
    margin-bottom: 20px;
  }

  .btn-group {
    margin-bottom: 0px;
  }

  .el-input {
    width: 100%!important;
  }

  .el-input>>>input {
    border: 2px solid #eff1f7;
    border-radius: 0px;
    padding-left: 40px!important;
  }

  .el-input>>>input:focus {
    border: 2px solid #409EFF;
  }

  .pass-forgot {
    float: left;
    /* color: #b8bfcd; */
    /* font-weight: 700; */
  }
  /* .pass-forgot:hover {
    color: #007fff!important;
  } */

  .icon-label {
    position: absolute;
    left: 13px;
    top: 5px;
    z-index: 2;
    pointer-events: none
  }

  #container {
    position: absolute;
    height: 100%;
    width: 100%;
  }

  #output {
    width: 100%;
    height: 100%;
  }

</style>
